const buildCode =(t:string, c?:string) =>
`export default function ${t} (${(!!c && c.indexOf('children') >= 0)? '{children}':''}) {
    ...
    return (
        ...
        ${c || 'content...'}
        ...
    )
}`

export default function Page() {
  return (
    <main>
      <h1 className="text-4xl">Component A & B</h1>

      <Block>
        <CodeFile name="a.tsx" code={buildCode('A', '{children}')} />
        <CodeFile name="b.tsx" code={buildCode('B')} />
        <CodeFile name="c.tsx" code={buildCode('C',
`<A>
            <B />
        </A>`
        )} />
      </Block>

      <br />

      <Block>
        <CodeFile name="a.tsx" code={buildCode('A')} />
        <CodeFile name="b.tsx" code={buildCode('B', `<A />`)} />
      </Block>

    </main>
  )
}

const Block = ({children} : {
  children: React.ReactNode;
}) => {
  return (
    <div style={{
      background: '#fff',
      padding: '1rem',
    }}>
      {children}
    </div>
  )
}

const CodeFile = ({name, code}:{
  name: string;
  code: string;
}) => (
  <>
    <h2>{name}</h2>
    <div style={{whiteSpace: 'pre', border: '1px solid blue', padding: '1rem'}}>
      {code}
    </div>
  </>
)
